<template>
    <div>
        <!-- <h3>{{firstName}}---{{lastName}}</h3> -->
        <h3>{{fullName}}</h3>

        <button @click="changeName">修改 firstname</button>
    </div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
    setup() {
        let firstName = ref("kobe");
        let lastName = ref("james");

        //1.传入一个getter函数 computed返回之时一个ref对象
        // const fullName = computed(() => firstName.value + " - " + lastName.value)

        //2.传入一个对象，对象包含getter/setter
        const fullName = computed({
            get: () => firstName.value + " " + lastName.value,
            set(newVal) {
                const names = newVal.split(" ");
                firstName.value = names[0];
                lastName.value = names[1];
            }
        })

        const changeName = () => {
            // firstName.value = "yzh";

            fullName.value = "ace sabo"
        };

        return {
            // firstName,
            // lastName,
            fullName,
            changeName
        }
    }
}
</script>
<style>
</style>

